<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
        p {
            font-size: 20px;
            text-decoration: underline;
            text-decoration-color: rgba(64, 235, 255, 0.3);
            text-underline-offset: 10px;
        }
    </style>
</head>
<body>
<p>11111</p>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
<script>
    let ctx = document.getElementById('canvas');
    // 获取webgl上下文
    let gl = ctx.getContext('webgl')
    // 顶点着色器
    let VERTEX_SHADER_SOURCE = `
        attribute vec4 aPosition;
        // 创建偏移量
        attribute float aTranslate;
        void main(){
            gl_Position = vec4(aPosition.x + aTranslate, aPosition.y, aPosition.z, 1.0);
            gl_PointSize = 10.0;
        }
    `;
    // 片元着色器
    const FRAGMENT_SHADER_SOURCE = `
        void main(){
            gl_FragColor = vec4(1.0, 0.0, 0.1, 1.0);
        }
    `;
    let program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
    // 获取 attribute变量，必须在initShader之后
    let aPosition = gl.getAttribLocation(program, 'aPosition')
    // 获取 attribute变量 aTranslate
    let aTranslate = gl.getAttribLocation(program, 'aTranslate')

    // 创建一组顶点数据   Float32Array类型化数组，用这个数组，既可以知道里面是数据类型
    let points = new Float32Array([
        -0.5,-0.5,  // 10.0
        0.5,-0.5,  // 20.0
        0.0,0.5,  // 30.0
    ])
    // 创建缓冲区
    let buffer = gl.createBuffer();
    // 将缓冲区对象 绑定到 webgl上
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 将顶点数据 写入 缓冲区对象
    gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
    // 给顶点赋值 指定给aPosition attribute变量
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0 )
    // 激活attribute变量  gl.disableVertexAttribArray(aPosition); 使⽤此⽅法禁⽤
    gl.enableVertexAttribArray(aPosition);

    //
    let x = -1;
    setInterval(()=>{
        x += 0.01;
        if(x > 1){
            x = -1
        }
        // 因为这里使用的是Float数据，所以我们用 vertexAttrib1f 赋值
        gl.vertexAttrib1f(aTranslate, x)
        // 执行绘制 绘制三个顶点
        gl.drawArrays(gl.TRIANGLES, 0, 3);
    },60)


</script>
</html>
